<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>

<head>
  <title>Movie.com</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <!-- <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css"> -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <style>
    body {
      margin: 0px;
      background-color: rgba(50, 50, 50, 0.9);
    }

    /* 所有 */
    #app {
      width: 100%;
      color: white
    }

    .top {

      width: 100%;
    }

    .header {
      margin: 0 auto;
      width: 1300px;

    }

    .logoimg {
      float: left;
    }

    .banner {
      margin: 0 auto;
      margin-top: 10px;
      width: 1300px;
    }

    .prods {
      width: 1400px;

      margin: 0 auto;
      overflow: hidden;
    }

    .proditem {
      float: left;
      width: 150px;
      margin: 10px;
      background-color: rgba(50, 50, 50, 0.9);
      position: relative;
      border-radius: 3px;
      margin: 10px;
      cursor: pointer;
      transition: 0.3s;
      transform: translateY(5px);
      -ms-transform: translateY(5px);
      -webkit-transform: translateY(5px);
    }

    .proditem:hover {
      -moz-box-shadow: 0 2px 40px -24px rgba(0, 36, 100, 1);
      box-shadow: 0 2px 40px -24px rgba(0, 36, 100, 1);
      transition: 0.3s;
      transform: translateY(-5px);
      -ms-transform: translateY(-5px);
      -webkit-transform: translateY(-5px);
    }

    .proditemimg {
      width: 150px;
      height: 203px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }

    .proditemtitle {
      font-size: 13px;
      color: white;
      margin: 10px;

    }

    .proditemopentime {
      font-size: 10px;
      margin-left: 10px;

    }

    .proditemsell {
      font-size: 12px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .footer {
      width: 100%;
      position: relative;
      height: 150px;
      background-color: rgba(0, 0, 0, 0.8);
      color: rgba(255, 255, 255, 0.8);
    }

    .footer-left {
      position: absolute;
      top: 20px;
      right: 100px;
      padding: 10px;
      width: 600px;
      text-align: right;
    }

    .footer-left-link {
      position: relative;
      margin-top: 20px;
    }

    .footer-left-link-item {
      margin: 10px;
      font-size: 15px;
    }

    .filter {
      margin: 0 auto;
      width: 1300px;
    }

    .filter-search {
      margin: 20px;
      line-height: 50px;
    }

    .filter-date {
      margin: 20px;

    }

    .filter-place {
      margin: 20px;

    }

    .filter-theme {
      margin: 20px;

    }

    .filter-search-input {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="top">
      <div class="header">
        <a href="/index.jsp " class='logoimg'> <img alt="" src="./static/imgs/logo_icon.png"> </a>
        <el-menu :default-active="activeIndex" style=" background-color:rgba(100, 100, 100, 0.1);"
          active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="0" style="cursor: pointer;" disabled>
          </el-menu-item>
          <!-- <el-menu-item index="4" v-if="logined" @click="gohotmovie">热门电影 </el-menu-item> -->
          <el-menu-item index="5" v-if="!logined" style="float: right;"> <span> <a href="/login.jsp">登录 </a></span> /
            <span> <a href="/login.jsp">注册 </a></span></el-menu-item>
          <el-menu-item index="4" v-if="logined" style="float: right;" @click="gousercenter">用户中心 </el-menu-item>
          <el-menu-item index="3" v-if="logined" style="float: right;" @click="golog">我的订单 </el-menu-item>
          <el-menu-item index="3" v-if="logined" style="float: right;" @click="logout">退出 </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="carousel">

      <el-carousel :interval="4000" class="banner" direction="vertical">
        <el-carousel-item>
          <el-carousel :interval="2000" type="card" class="banner">
            <el-carousel-item v-for="(item,index) in banner" :key="index">
              <img class="bannerimg" :src="item.img">
            </el-carousel-item>
          </el-carousel>
        </el-carousel-item>
        <el-carousel-item v-for="(item,index) in banner2" :key="index">
          <img class="bannerimg" style="width: 100%;" :src="item.img">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="filter">

      <div class="filter-date">
        发布日期后：
        <el-date-picker value-format="yyyy-MM" v-model="godate" type="month" placeholder="选择日期">
        </el-date-picker>
        <el-button @click="searchdate"> 查找电影</el-button>
 
        </el-date-picker>
        <el-input v-model="searchmoviedate" style="margin-left: 20px; width: 200px;" placeholder="搜索电影"> </el-input>
        <el-button @click="search"> 查找</el-button>
      </div>


      <div class="filter-theme">
        分类：
        <el-radio-group v-model="themeselected" @change="handleThemeChange">
          <el-radio style="color: white;" :label="-1"> 
全部
          </el-radio>
          <el-radio style="color: white;" v-for="(item,index) in catelist" :label="item.id" :key="index"> {{item.name}}
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="prods">
      <div class="proditem" v-for="(item, index) in filteplist" :key="index">
        <img class="proditemimg" @click="godetail(item)" :src="item.postimg" alt="">
        <div class="proditemtitle" @click="godetail2(item)"> {{item.name}} <span
            style="color:rgba(255, 0, 0, 0.8);font-size: 12px; float: right;"> {{ item.price}} RMB</span></div>
        <div class="proditemopentime"> 开放时间：{{item.opentime.substr(0,10)}} </div>
        <div class="proditemsell">已售出： {{item.sell}} </div>
      </div>
    </div>

    <div class="footer">
      <div class="footer-left">
        <div class="footer-left-link">
          <div class="footer-left-link-item">版权所有 @李书星</div>
          <div class="footer-left-link-item">Copyright All Right Reserved @ShuXing Li</div>
          <div class="footer-left-link-item">技术栈：JSP、Spring Boot、Spring MVC、Mybatis、Mysql、Vue、ElementUI</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        logined: true,
        themeselected: undefined,
        godate: "",
        returndate: "",
        allcity: false,
        checkedCities: [],
        isIndeterminate: true,
        checkAll: false,
        searchmoviedate: "",
        usersearch: "",
        activeIndex: "1",
        aboutMeUrl: "aboutme.jsp",
        iframeUrl: "aboutme.jsp",
        banner: [
          { index: 0, img: './static/imgs/p1.jpg' },
          { index: 1, img: './static/imgs/p2.jpg' },
          { index: 2, img: './static/imgs/p3.jpg' },

        ],
        banner2: [
          { index: 0, img: './static/imgs/p5.jpg' },
          { index: 1, img: './static/imgs/p6.jpg' },
          { index: 2, img: './static/imgs/p7.jpg' },

        ],
        filteplist: [],
        prodlist: [
        ],
        catelist: []
      },
      mounted() {
        this.getAllMovie();
        this.getCate();
      },
      methods: {
        searchdate() {
          var newlist = []
          var searchdate = new Date(this.godate)
          this.prodlist.forEach(ele=>{
            var pdate = new Date(ele.opentime)
            if(pdate >searchdate)
              newlist.push(ele)
          })
          this.filteplist = newlist
        },
        search() {
          console.log("ds")
          var newlist = []
          this.prodlist.forEach(ele => {
            if (ele.name == this.searchmoviedate) {
              newlist.push(ele)
            }
          })
          this.filteplist = newlist;
        },
        gohotmovie() {

        },
        getCate() {
          axios.post("/cate/getAllCate", {}).then(res => {
            let { result, data } = res.data;
            console.log(res)
            this.catelist = data
          })
        },
        getAllMovie() {
          axios.post("/movie/getAllMovie", {}).then(res => {
            let { result, data } = res.data;
            console.log(res)
            this.prodlist = data;
            this.filteplist = data;
          })
        },
        golog() {
          window.location.href = '/usercenter.jsp'

        },
        gousercenter() {
          window.location.href = '/userinfo.jsp'
        },
        handleThemeChange() {
          if(this.themeselected == -1){
            this.filteplist = this.prodlist;
            return;
          }
          var newlist = []
          this.prodlist.forEach(ele => {
            if(ele.cateid == this.themeselected){
              newlist.push(ele);
            }
            this.filteplist=  newlist;
          })
        },
        handleCheckAllChange(val) {
          this.checkedCities = val ? cityOptions : [];
          this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        handleIconClick() {

        },
        godetail(item) {
          console.log("/siteselect.jsp?id=" + item.id)
          window.location.href = "/siteselect.jsp?id=" + item.id
        },
        godetail2(item) {
          console.log("/siteselect.jsp?id=" + item.id)
          window.location.href = "/movieinfo.jsp?id=" + item.id
        },
        handleSelect() {

        },
        logout() {
          axios.post("/logout").then(res => {
            console.log(res)
            window.location.href = "/"
          })
        }
      }
    });
  </script>



</body>

</html>